<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link href="/css/bootstrap.min.css" rel="stylesheet">-->
<link href="/fonts/iconfont/iconfont.css" rel="stylesheet">
<link type="text/css" href="/css/cultivateWeb/style/course.css" rel="stylesheet">
<link type="text/css" href="/css/cultivateWeb/style/trainingResourcesDetails_directory.css" rel="stylesheet">

<link type="text/css" href="/lib/vide7.5.5/css/video-js.min.css" rel="stylesheet">
<link href="/css/bootstrap.min.css" rel="stylesheet">

<head th:include="cultivateWeb/header :: culHeaderCss"></head>

<style>
    .xianshi span {
        color: #fff
    }

    .title_1 {
        color: #333;
        font-size: 14px;
        font-weight: 700;
    }

    p {
        font-size: 14px
    }

    .video-js .vjs-tech {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
</style>

<body>
    <!-- 顶部导航 -->
    <header th:include="cultivateWeb/header :: header"></header>

    <script type="text/javascript" src="/js/cultivateWeb/resourceJquery.js"></script>
    <script type="text/javascript" src="/js/cultivateWeb/trainingResourceDetaiksC.js"></script>
    <script type="text/javascript" src="/js/cultivateWeb/trainingResourceDetaiks.js"></script>

    <div id="layui-container2" style="background-color: #f7f7f7; ">
        <div class="layui-container">
            <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> >
                <a href="/cultivate/courseIndex">培训课程</a> > 课程详情
            </p>
        </div>
        <div class="container">
            <div class="row">
                <section>
                    <div class="img_box">
                        <p><img th:src="${cou.thumbnail}" class="courimg" style="margin: 0" id="courseImg"></p>
                        <div class="div_1">
                            <input type="hidden" id="isMyCourse" />
                            <input type="hidden" id="courseId" th:value="${cou.id}" />
                            <span class="span_1" th:text="${cou.name}"></span>

                            <span class="span_2" th:if="${cou.specialPrice=='0.00'}">
                                <span style="color:#fe7252;font-size:22px">免费</span>
                            </span>
                            <span class="span_2">课程类型：
                                <span th:if="${cou.type==0}">证书课程</span>
                                <span th:if="${cou.type==1}">师资培训课程</span>
                                <span th:if="${cou.type==2}">考评员培训课程</span>
                                <span th:if="${cou.type==3}">高级师资培训课程</span>
                                <span th:if="${cou.type==4}">高级考评员培训课程</span>
                            </span>
                            <span class="span_2">讲师名：<span th:text="${cou.teacherName}"></span></span>
                        </div>
                        <div style="clear: both"></div>
                    </div>
                    <div class="div_2">
                        <div class="fieldset-list ">
                            <div class="title-top" style="position: relative">
                                <h2 th:text="${chapterInfo.name}"
                                    style="height: 50px;display: flex;flex-direction: row;align-items: center;"></h2>
                                <a th:href="'/couInfo/couInfo?id='+${cou.id}"
                                    style="position: absolute; right: 5px; top: 7px; color: #A6A6A6;">&lt;返回课程内容</a>
                            </div>
                            <div class="Qin_micro_lesson">
                                <div class="Qin_exam">
                                    <div class="Qin_exam_title clefix" id="Qin_exam_lesson">
                                        <div class="course-arrow left">
                                            <i class="iconfont icon-icon_on_the_left" aria-hidden="true"
                                                style="margin-right: 0px;color: #666666;font-size: 35px;"></i>
                                        </div>
                                        <div class="course-arrow right">
                                            <i class="iconfont icon-icon_on_the_right" aria-hidden="true"
                                                style="margin-right: 0px;color: #666666;font-size: 35px;"></i>
                                        </div>
                                        <div class="course-center">
                                            <div class="clefix resource"
                                                style="margin-left: 0px;display: flex;flex-direction: row;align-items: center;">
                                                <INPUT id="rsize" TYPE="hidden" th:value="${rsize}" />
                                                <INPUT id="rindexCurrent" TYPE="hidden" th:value="${rindexCurrent}" />
                                                <INPUT id="lastRindex" TYPE="hidden" th:value="${rindexCurrent}" />
                                                <INPUT id="rTypeCurrent" TYPE="hidden" th:value="${rTypeCurrent}" />
                                                <INPUT id="rIdCurrent" TYPE="hidden" th:value="${resourcesDO.id}" />
                                                <th:block th:each="res,loopStatus : ${resources}">
                                                    <!-- <a th:id="'index_'+{res.rindex}" th:href="'/couInfo/couInfo/trainingResourcesDetails?id='+${chapterInfo.id}+'&resourceId='+${res.id}+'&rindex='+${res.rindex}" th:class="${res.rindex+''==rindexCurrent+''?'seled':''}" style="text-align: center;">-->
                                                    <!--th:style="${res.rindex+''==rindexCurrent+''?'background-color: #009999;':''}"-->
                                                    <a th:id="${'index_' + res.rindex}" href="javascript:void(0)"
                                                        th:onclick="|changeIndex('${chapterInfo.id}', '${res.rindex}', '${res.id}')|"
                                                        style="text-align: center;">
                                                        <th:block th:if="${res.type}==0">
                                                            <i class="iconfont icon-wendang" aria-hidden="true"
                                                                style="margin-right: 0px;color: #d6204b;font-size: 35px;"></i>
                                                        </th:block>
                                                        <th:block th:if="${res.type}==1">
                                                            <i class="iconfont icon-icon-test" aria-hidden="true"
                                                                style="margin-right: 0px;color: #f68859;font-size: 35px;"></i>
                                                        </th:block>
                                                        <th:block th:if="${res.type}==2">
                                                            <i class="iconfont icon-ppt" aria-hidden="true"
                                                                style="margin-right: 0px;color: #f68859; font-size: 35px;"></i>
                                                        </th:block>
                                                        <th:block th:if="${res.type}==3">
                                                            <i class="layui-icon layui-icon-file" aria-hidden="true"
                                                                style="margin-right: 0px"></i>
                                                        </th:block>
                                                        <th:block th:if="${res.type}==4">
                                                            <i class="iconfont icon-icon-test1" aria-hidden="true"
                                                                style="margin-right: 0px;color: #f68859;font-size: 35px;"></i>
                                                        </th:block>
                                                        <th:block th:if="${res.type}==5">
                                                            <i class="iconfont icon-icon-test" aria-hidden="true"
                                                                style="margin-right: 30px;color: #f68859;font-size: 35px;"></i>
                                                        </th:block>
                                                    </a>
                                                </th:block>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="Qin_exam_lesson_con">
                                        <div class="view_text_con" style="margin: 0px;">

                                        </div>
                                    </div>
                                    <div class="xianshi" style="font-size: 20px;margin-bottom: 10px;width: 100%;">
                                    </div>
                                    <div id="intro" style="width: 100%;padding: 0 10px;box-sizing: border-box;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <div id="createCode" style="display: none">
        <div style="margin-top: 40px;text-align:center">
            <input placeholder="请输入验证码" id="code" /><span class="getSmsCodeBtn"></span> <span class='right'
                style="cursor: pointer" onclick='createCode()'>换一张</span>
        </div>
    </div>

    <script id="doc_html" type="text/html">
    <style>
        .Preview {
            width: 197px;
            height: 245px;
            margin: 110px auto;
        }

        .Preview p {
            text-align: center;
            color: #6d6d6d;
        }

        .Preview p span {
            font-size: 20px;
            vertical-align: sub;
            margin-right: 15px;
        }

        /*.Preview p a {
            display: inline-block;
            width: 71px;
            height: 24px;
            background: url('/study/css/img/xiazai.png') no-repeat;
        }*/

        a:hover {
            text-decoration: none;
        }

        a, a.f-fcgreen {
            color: #009999;
        }
    </style>
    {{if extension!='other'}}
    <div class="docBox" data-url="{{newUrl}}" data-downloadurl="{{fileRoute}}" data-id="{{id}}" style="height: 600px; position: relative;">

        {{if fileRoute==''}}
        <div class="Preview">
            <p>
                <span>当前文件无法预览,文件不存在</span>
            </p>
        </div>
        {{/if}}

    </div>
    {{/if}}
    {{if extension=='other'}}
        <div class="Preview" style="width: 100%;text-align: center">
            <p>
                <span>当前文件无法预览</span>
                {{if downloadFlag == 1}}
                <a href="{{fileRoute}}" target="_self" class="downloadDoc" style="font-size: 14px;  right: 46px; bottom: 0px; text-decoration: underline; color: #228da8;">下载该资源</a>
                {{/if}}
                {{if downloadFlag == 0}}
                <a href="javacript:void(0);" target="_self" class="downloadDoc" style="font-size: 14px;  right: 46px; bottom: 0px; text-decoration: underline; color: #999;">该资源不能下载</a>
                {{/if}}
            </p>
        </div>
    {{/if}}
    {{if fileRoute!=''}}
    {{if downloadFlag == 1}}
    <a href="{{fileRoute}}" target="_self" class="downloadDoc" style="font-size: 14px;  right: 46px; bottom: 0px; text-decoration: underline; color: #228da8;">下载该资源</a>
    {{/if}}
    {{if downloadFlag == 0}}
    <a href="javacript:void(0);" target="_self" class="downloadDoc" style="font-size: 14px;  right: 46px; bottom: 0px; text-decoration: underline; color: #999;">该资源不能下载</a>
    {{/if}}
    {{/if}}
</script>

    <!-- footer ------------------------------------------------------- -->
    <div class="footer" th:include="cultivateWeb/header :: footer"></div>
</body>

<script type="text/javascript" src="/js/xlPaging.js"></script>
<!--<script type="text/javascript" src="/js/bootstrap.min.js"></script>-->
<script src="/js/jquery.min.js"></script>
<script src="/lib/vide7.5.5/js/video.min.js"></script>
<script>
    $(function () {
        getData();
    });

    //设置中文
    videojs.addLanguage('zh-CN', {
        "Play": "播放",
        "Pause": "暂停",
        "Current Time": "当前时间",
        "Duration": "时长",
        "Remaining Time": "剩余时间",
        "Stream Type": "媒体流类型",
        "LIVE": "直播",
        "Loaded": "加载完毕",
        "Progress": "进度",
        "Fullscreen": "全屏",
        "Non-Fullscreen": "退出全屏",
        "Mute": "静音",
        "Unmute": "取消静音",
        "Playback Rate": "播放速度",
        "Subtitles": "字幕",
        "subtitles off": "关闭字幕",
        "Captions": "内嵌字幕",
        "captions off": "关闭内嵌字幕",
        "Chapters": "节目段落",
        "Close Modal Dialog": "关闭弹窗",
        "Descriptions": "描述",
        "descriptions off": "关闭描述",
        "Audio Track": "音轨",
        "You aborted the media playback": "视频播放被终止",
        "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
        "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
        "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
        "No compatible source was found for this media.": "无法找到此视频兼容的源。",
        "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
        "Play Video": "播放视频",
        "Close": "关闭",
        "Modal Window": "弹窗",
        "This is a modal window": "这是一个弹窗",
        "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
        ", opens captions settings dialog": ", 开启标题设置弹窗",
        ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
        ", opens descriptions settings dialog": ", 开启描述设置弹窗",
        ", selected": ", 选择",
        "captions settings": "字幕设定",
        "Audio Player": "音频播放器",
        "Video Player": "视频播放器",
        "Replay": "重播",
        "Progress Bar": "进度小节",
        "Volume Level": "音量",
        "subtitles settings": "字幕设定",
        "descriptions settings": "描述设定",
        "Text": "文字",
        "White": "白",
        "Black": "黑",
        "Red": "红",
        "Green": "绿",
        "Blue": "蓝",
        "Yellow": "黄",
        "Magenta": "紫红",
        "Cyan": "青",
        "Background": "背景",
        "Window": "视窗",
        "Transparent": "透明",
        "Semi-Transparent": "半透明",
        "Opaque": "不透明",
        "Font Size": "字体尺寸",
        "Text Edge Style": "字体边缘样式",
        "None": "无",
        "Raised": "浮雕",
        "Depressed": "压低",
        "Uniform": "均匀",
        "Dropshadow": "下阴影",
        "Font Family": "字体库",
        "Proportional Sans-Serif": "比例无细体",
        "Monospace Sans-Serif": "单间隔无细体",
        "Proportional Serif": "比例细体",
        "Monospace Serif": "单间隔细体",
        "Casual": "舒适",
        "Script": "手写体",
        "Small Caps": "小型大写字体",
        "Reset": "重启",
        "restore all settings to the default values": "恢复全部设定至预设值",
        "Done": "完成",
        "Caption Settings Dialog": "字幕设定视窗",
        "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
        "End of dialog window.": "结束对话视窗"
    });
    var myPlayer = '';
    var startTime = formatTime(new Date());

    function getData() {
        //判断用户是否购买课程
        ajaxToken("/jzApi/courses/selIsMyCourse", 'GET',
            {
                courseId: $("#courseId").val()
            }, function (res) {
                $("#isMyCourse").val(res.isMyCourse);
                // console.log("isMyCourse:"+res.isMyCourse);
            }
        );


        /*ajaxToken("/jzApi/courses/selChapterDetails", 'GET',
            {
                id: $("#resourceId").val(),
                chapterId:$("#chapterId").val()
            }, function (res) {
                if (res == '') {
                    $("#course").html('<div class="noData">暂无数据</div>');
                } else {
                    if (res.code == 40025 || res.code == 40022) {
                        layer.confirm("您暂未报名此课程，请报名后重试！", {
                            closeBtn: 0,
                            btn: ['返回'],
                            yes: function (index, layero) {
                                window.history.back(-1);
                            }
                        });
                        return false
                    }

                    var intro = '';
                    var xianshi = '';
                    var a = false;
                    if ( res.traRes.type == 1) {
                        intro += '<input type="hidden" id="isFree" value="' + res.isFree + '" /><h1 style="font-size: 20px;margin-bottom: 10px">视频名称：' + res.traRes.name + '</h1><p style="color: #666"><span class="title_1">章节描述：</span>' + res.introduce + '</p><p style="color: #666;margin-top: 10px"><span class="title_1">最短学习时长：</span>' + res.minTime + '分钟</p>';
                        a = true;
                        xianshi += '<video id="my-video" class="video-js vjs-big-play-centered" x5-video-player-fullscreen="false" controls preload="auto" width="100%" height="600" data-setup="{}">' +
                            '<source src="' + res.traRes.fileRoute + '" type="video/mp4">' +
                            '<source src="' + res.traRes.fileRoute + '" type="video/webm">' +
                            '<source src="' + res.traRes.fileRoute + '" type="video/ogg">' +
                            '</video>'
                    } else {
                        xianshi += '<div>资源下载：<a download href="' + res.traRes.fileRoute + '" style="text-decoration: underline;color: #005C34">' + res.traRes.name + '</a></div>'
                    }
                    $(".xianshi").html(xianshi);
                    $("#intro").html(intro);
                    if (a) {
                        myPlayer = videojs('my-video');
                        videojs("my-video").ready(function () {
                            var myPlayer = this;
                            myPlayer.play()
                        });
                    }

                }
            }
        )*/
    }

    function submit() {
        var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
        ajaxToken("/jzApi/user/selUserDetail", "GET", {}, function (r) {
            // console.log("结果：", r)
            // console.log(r.name)
            if (r.state == 1) {
                // if (r.headPortrait != "" && r.headPortrait != null && r.name != "" && r.name != null && r.sex != "" &&
                //     r.sex != null && r.idNumber != "" && r.idNumber != null && r.mobile != "" && r.mobile != null &&
                //     r.dateOfBirth != "" && r.dateOfBirth != null && r.nation != "" &&
                //     r.nation != null && r.education != "" && r.education != null && r.major != "" && r.major != null &&
                //     r.politicalAffiliation != "" && r.politicalAffiliation != null && (r.officialCapacity != "" &&
                //         r.officialCapacity != null) && r.province != "" && r.province != null && r.province != "" && r.province != null &&
                //     r.city != "" && r.city != null && r.liveAddress != "" && r.liveAddress != null && r.experience != "" &&
                //     r.experience != null){

                ajaxToken("/jzApi/courses/selCourseOrder", "POST", {
                    id: $("#courseId").val()
                }, function (res) {
                    location.href = '/couInfo/courseSurePay?orderId=' + res.orderId + '&courseId=' + $("#courseId").val() + '&type=0';
                });
                // }else {
                //     layer.alert("完善个人信息才能报名该课程");
                // }
            }
            else if (r.state == 0) {
                layer.alert("个人信息审核通过才能报名该课程");
            } else if (r.state == 3) {
                if (is_mobi) {
                    layer.confirm('完善个人信息才能报名该课程？', {
                        btn: ['确定', '取消']
                    }, function () {

                        location.href = '/cultivate/my'
                    });
                } else {
                    layer.alert("完善个人信息才能报名该课程");
                }

            }

        })


    }

</script>

</html>